// 商品详情页功能
document.addEventListener('DOMContentLoaded', function() {
    // 标签页切换功能
    const tabButtons = document.querySelectorAll('.product-tab');
    const tabContents = document.querySelectorAll('.product-tab-content');
    
    if(tabButtons.length > 0) {
        tabButtons.forEach((button, index) => {
            button.addEventListener('click', () => {
                // 移除所有标签页的激活状态
                tabButtons.forEach(btn => {
                    btn.classList.remove('text-rose-500', 'border-b-2', 'border-rose-500');
                    btn.classList.add('text-gray-600');
                });
                
                // 隐藏所有内容
                tabContents.forEach(content => {
                    content.classList.add('hidden');
                    content.classList.remove('block');
                });
                
                // 激活当前标签页
                button.classList.add('text-rose-500', 'border-b-2', 'border-rose-500');
                button.classList.remove('text-gray-600');
                
                // 显示当前内容
                tabContents[index].classList.remove('hidden');
                tabContents[index].classList.add('block');
            });
        });
    }
    
    // 商品缩略图切换功能
    const thumbnails = document.querySelectorAll('.product-thumbnail');
    const mainImage = document.querySelector('.product-main-image img');
    
    if(thumbnails.length > 0 && mainImage) {
        thumbnails.forEach(thumb => {
            thumb.addEventListener('click', () => {
                // 更新主图片
                mainImage.src = thumb.querySelector('img').src;
                
                // 更新缩略图选中状态
                thumbnails.forEach(t => {
                    t.classList.remove('border-rose-500');
                    t.classList.add('border-gray-200');
                });
                thumb.classList.remove('border-gray-200');
                thumb.classList.add('border-rose-500');
            });
        });
    }
    
    // 款式选择功能
    const styleOptions = document.querySelectorAll('.style-option');
    
    if(styleOptions.length > 0) {
        styleOptions.forEach(option => {
            option.addEventListener('click', () => {
                styleOptions.forEach(opt => {
                    opt.classList.remove('border-rose-500', 'bg-rose-50', 'text-rose-600');
                    opt.classList.add('border-gray-200');
                });
                
                option.classList.add('border-rose-500', 'bg-rose-50', 'text-rose-600');
                option.classList.remove('border-gray-200');
            });
        });
    }
    
    // 数量调整功能
    const minusBtn = document.querySelector('.minus-btn');
    const plusBtn = document.querySelector('.plus-btn');
    const quantityInput = document.querySelector('.quantity-control input');
    
    if(minusBtn && plusBtn && quantityInput) {
        minusBtn.addEventListener('click', () => {
            const currentValue = parseInt(quantityInput.value);
            if(currentValue > 1) {
                quantityInput.value = currentValue - 1;
            }
        });
        
        plusBtn.addEventListener('click', () => {
            const currentValue = parseInt(quantityInput.value);
            quantityInput.value = currentValue + 1;
        });
        
        // 防止手动输入非法值
        quantityInput.addEventListener('change', () => {
            let value = parseInt(quantityInput.value);
            if(isNaN(value) || value < 1) {
                quantityInput.value = 1;
            }
        });
    }
    
    // 收藏按钮功能
    const favoriteBtn = document.querySelector('.favorite-btn');
    
    if(favoriteBtn) {
        favoriteBtn.addEventListener('click', () => {
            const icon = favoriteBtn.querySelector('i');
            if(icon.classList.contains('far')) {
                icon.classList.remove('far');
                icon.classList.add('fas', 'text-rose-500');
                showMessage('已添加到收藏夹');
            } else {
                icon.classList.remove('fas', 'text-rose-500');
                icon.classList.add('far');
                showMessage('已从收藏夹移除');
            }
        });
    }
    
    // 加入购物车功能
    const addToCartBtn = document.querySelector('.add-to-cart-btn');
    
    if(addToCartBtn) {
        addToCartBtn.addEventListener('click', () => {
            const quantity = parseInt(document.querySelector('.quantity-control input').value);
            const selectedStyle = document.querySelector('.style-option.border-rose-500').textContent.trim();
            
            // 更新购物车数量显示
            const cartCountElements = document.querySelectorAll('.cart-count');
            cartCountElements.forEach(element => {
                const currentCount = parseInt(element.textContent);
                element.textContent = currentCount + quantity;
            });
            
            showMessage(`已将 ${quantity} 件 ${selectedStyle} 添加到购物车`);
        });
    }
    
    // 立即购买功能
    const buyNowBtn = document.querySelector('.buy-now-btn');
    
    if(buyNowBtn) {
        buyNowBtn.addEventListener('click', () => {
            const quantity = parseInt(document.querySelector('.quantity-control input').value);
            const selectedStyle = document.querySelector('.style-option.border-rose-500').textContent.trim();
            
            // 这里可以添加跳转到结算页面的逻辑
            // window.location.href = `checkout.html?product=浪漫告白玫瑰花束&style=${selectedStyle}&quantity=${quantity}`;
            
            showMessage('即将跳转到结算页面...');
        });
    }
    
    // 消息提示功能
    function showMessage(message) {
        // 创建消息元素
        const messageElement = document.createElement('div');
        messageElement.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg z-50 transition-opacity duration-300';
        messageElement.textContent = message;
        
        // 添加到页面
        document.body.appendChild(messageElement);
        
        // 2秒后淡出
        setTimeout(() => {
            messageElement.style.opacity = '0';
            setTimeout(() => {
                document.body.removeChild(messageElement);
            }, 300);
        }, 2000);
    }
});